* {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  max-width: 414px;
  max-height: 736px;
  margin: 0 auto;
}
#app {
  height: 100%;
}
img {
  width: 100%;
}
.logo {
  width: 50%;
  height: 0.91rem;
  margin-left: 34.13%;
  color: #fff;
  font-size: 0.91rem;
  font-family: '黑体';
  line-height: 0.91rem;
}
.logo > img {
  width: 0.91rem;
  height: 0.91rem;
  vertical-align: top;
}
.home-main {
  background: #ffc01e;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  background-image: url(../img/tree-bg2.png);
  background-position: center;
  background-size: 100% 100%;
}
.home-title {
  width: 75.47%;
  height: 6.5rem;
  margin: 0 auto;
  padding-top: 1rem;
}
.home-tree {
  width: 58.4%;
  margin: 0.5rem auto 0;
}
.home-btn {
  width: 48.3%;
  margin: 0.5rem auto 0;
}
.home-scale {
  animation: myfirst 1s linear;
}
@keyframes myfirst {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
.renyang-main {
  background-color: #00c434;
  width: 100%;
  height: 100%;
  background-image: url(../img/renyang-buttom-bg.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: bottom;
  background-size: 100%;
}
.renyang-top {
  width: 100%;
  height: 17.7rem;
  background: url(../img/renyang-top-bg.png) no-repeat center center;
  background-size: cover;
  padding-top: 0.5rem;
}
.renyang-top > div {
  width: 73.87%;
  margin: 0 auto;
  padding-top: 3.84rem;
}
@font-face {
  font-family: '手札体-简';
  src: url('../fonts/HannotateSC-W5.ttf') format('truetype');
}
.renyang-download {
  width: 48.27%;
  margin: 0.78rem auto 0;
  font-family: '手札体-简';
  font-size: 1.2rem;
  color: #30cf59;
  text-align: center;
}
.renyang-download > p {
  width: 100%;
  height: 2.613rem;
  margin-bottom: 0.8rem;
  background: url(../img/renyang-btn-bg.png) no-repeat center center;
  background-size: cover;
  position: relative;
  transition: 1s;
  line-height: 2.613rem;
}
.renyang-transform {
  animation: transform 1s;
}
.renyang-transform1 {
  animation: transform 1s;
}
@keyframes transform {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(90deg);
  }
}
@keyframes transform {
  0% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0);
  }
}
.renyang1-main {
  background: #f50014;
  width: 100%;
  height: 100%;
  background-image: url(../img/download-bg.png);
  background-position: center;
  background-size: 100% 100%;
}
.renyang1-top {
  height: 33.73%;
  padding-top: 2.67rem;
}
.renyang1-top:after {
  display: block;
  clear: both;
  content: '';
}
.renyang1-top > div {
  width: 34.8%;
  float: right;
}
.renyang1-top > p {
  width: 38.4%;
  margin-top: 3rem;
  float: left;
  font-size: 4.59rem;
  margin-left: 16%;
  font-family: '手札体-简';
}
.renyang1-top > p > span {
  margin-left: 8.8%;
}
.renyang1-top img {
  visibility: hidden;
}
.renyang1-font {
  font-size: 1.38rem;
  line-height: 1.92rem;
  margin-top: 3rem;
  margin-left: 16%;
  height: 5.33rem;
  font-family: '手札体-简';
}
.renyang1-download {
  width: 48.27%;
  margin: 3.57rem auto 0;
  opacity: 0;
  transition: 2s;
}
.renyang1-dsbk {
  opacity: 1;
}
.logistics1-main {
  width: 100%;
  height: 100%;
  position: relative;
}
.logistics1-main > div {
  position: absolute;
  display: none;
}
.logistics1-main > div:first-child {
  top: 0;
  left: 0;
  width: 6.56rem;
}
.logistics1-main > div:nth-child(2) {
  top: 0;
  right: 0;
  width: 13.14rem;
}
.logistics1-main > div:nth-child(3) {
  width: 100%;
  top: 10rem;
  left: 0;
}
.logistics1-main > div:nth-child(4) {
  top: 21.32rem;
  left: 0;
}
.logistics2-main {
  width: 100%;
  height: 100%;
  position: relative;
}
.logistics2-main > div {
  position: absolute;
  display: none;
}
.logistics2-main > div:first-child {
  top: 0;
  left: 0;
}
.logistics2-main > div:nth-child(2) {
  top: 6.24rem;
  left: 0;
}
.logistics2-main > div:nth-child(3) {
  width: 9.14rem;
  top: 15rem;
  left: 0;
}
.logistics2-main > div:nth-child(4) {
  width: 10.4rem;
  right: 0;
  top: 13.68rem;
}
.logistics2-main > div:nth-child(5) {
  top: 24.02rem;
  left: 0;
}
.logistics2-pagination {
  list-style: none;
  position: absolute;
  top: 2.79rem;
  left: 44%;
}
.logistics2-pagination:after {
  display: block;
  clear: both;
  content: '';
}
.logistics2-pagination > li {
  display: none;
  width: 0.48rem;
  height: 0.48rem;
  background: #fff;
  border-radius: 50%;
  float: left;
  margin-right: 0.27rem;
}
.tree-main {
  background: #ffc01e;
  width: 100%;
  height: 100%;
  position: relative;
}
.titleBig {
  width: 100%;
  font-size: 2rem;
  padding-top: 1rem;
  text-align: center;
  color: #572224;
  animation: titleBig 3s;
  animation-delay: 1s;
}
@keyframes titleBig {
  0% {
    transform: scale(1);
    color: #572224;
  }
  12.5% {
    transform: scale(1.5);
    color: #fff;
  }
  25% {
    transform: scale(1);
    color: #572224;
  }
  37.5% {
    transform: scale(1.5);
    color: #fff;
  }
  50% {
    transform: scale(1);
    color: #572224;
  }
  62.5% {
    transform: scale(1.5);
    color: #fff;
  }
  75% {
    transform: scale(1);
    color: #572224;
  }
  87.5% {
    transform: scale(1.5);
    color: #fff;
  }
  100% {
    transform: scale(1);
    color: #572224;
  }
}
.tree-tree {
  height: 19.47rem;
  margin-top: 1rem;
}
.tree-btn {
  width: 46%;
  margin: 1.41rem auto 0;
}
.star {
  position: absolute;
  height: 50%;
  width: 100%;
  top: 6%;
}
.star > img:first-child {
  width: 25px;
  left: 23%;
  top: 4rem;
}
.star > img:nth-child(2) {
  width: 25px;
  left: 60%;
  top: 13rem;
  transform: rotate(-7deg);
  animation: myscale1 0.7s linear;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}
.star > img:nth-child(3) {
  width: 25px;
  left: 40%;
  top: 5rem;
}
.star > img:nth-child(4) {
  width: 25px;
  left: 30%;
  top: 11rem;
}
.star > img:nth-child(5) {
  width: 20px;
  left: 70%;
  top: 7rem;
}
.star > img:nth-child(6) {
  width: 23px;
  left: 84%;
  top: 10rem;
}
.star > img:nth-child(7) {
  width: 30px;
  left: 60%;
  top: 3rem;
  transform: rotate(60deg);
  animation: myscale2 0.7s linear;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}
.star > img:nth-child(8) {
  width: 20px;
  left: 10%;
  top: 10rem;
  transform: rotate(45deg);
  animation: myscale3 0.7s linear;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}
.star > img {
  position: absolute;
  animation: myscale 0.7s linear;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}
@keyframes myscale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.8);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes myscale1 {
  0% {
    transform: scale(1) rotate(-7deg);
  }
  50% {
    transform: scale(1.8) rotate(-7deg);
  }
  100% {
    transform: scale(1) rotate(-7deg);
  }
}
@keyframes myscale2 {
  0% {
    transform: scale(1) rotate(60deg);
  }
  50% {
    transform: scale(1.8) rotate(60deg);
  }
  100% {
    transform: scale(1) rotate(60deg);
  }
}
@keyframes myscale3 {
  0% {
    transform: scale(1) rotate(45deg);
  }
  50% {
    transform: scale(1.8) rotate(45deg);
  }
  100% {
    transform: scale(1) rotate(45deg);
  }
}
.flashing-main {
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.flashing-main > p {
  display: none;
  position: absolute;
}
.flashing-main > .content {
  display: none;
  height: 100%;
  width: 100%;
}
.flashing-main > .content > .text {
  margin-top: 5.87rem;
  width: 88%;
  margin-left: 6%;
}
.flashing-main > .content > .btn1 {
  margin-top: 7.47rem;
  width: 41.33%;
  margin-left: 29.33%;
}
.flashing-main > .content > .btn2 {
  margin-top: 2.13rem;
  width: 41.33%;
  margin-left: 29.33%;
}
.flashing-main > .disbk {
  display: block;
}
.flashing-main > .p1 {
  width: 90%;
  top: 3.93rem;
  font-size: 2.2rem;
  left: 120%;
}
.flashing-main > .p2 {
  width: 90%;
  left: 100%;
  top: 13rem;
  font-size: 3rem;
}
.flashing-main > .p3 {
  width: 140%;
  left: 130%;
  top: 22.59rem;
  font-size: 2.2rem;
}
.flashing-main > .p5 {
  display: none;
  width: 100%;
  height: 50%;
  background: #000;
  color: #fff;
  position: absolute;
  top: 0;
  font-size: 1.2rem;
}
.flashing-main > .p6 {
  display: none;
  width: 100%;
  height: 50%;
  background: #fff;
  color: #000;
  position: absolute;
  top: 50%;
  font-size: 1.2rem;
}
.black {
  animation: black 2.5s;
}
.white {
  animation: white 2.5s;
}
@keyframes black {
  0% {
    background: #fff;
    color: #000;
  }
  25% {
    background: #000;
    color: #fff;
  }
  50% {
    background: #fff;
    color: #000;
  }
  75% {
    background: #000;
    color: #fff;
  }
  100% {
    background: #fff;
    color: #000;
  }
}
@keyframes white {
  0% {
    background: #000;
    color: #fff;
  }
  25% {
    background: #fff;
    color: #000;
  }
  50% {
    background: #000;
    color: #fff;
  }
  75% {
    background: #fff;
    color: #000;
  }
  100% {
    background: #000;
    color: #fff;
  }
}
.flashing-main > .p5 > div,
.flashing-main > .p6 > div {
  width: 100%;
  height: 2rem;
  position: absolute;
  top: 50%;
  margin-top: -1rem;
  text-align: center;
  font-size: 1.57rem;
  line-height: 2rem;
}
.flashing-main > .p7 {
  display: none;
  text-align: center;
}
.flashing-main > .p7 > p:first-child {
  width: 100%;
  height: 30rem;
  font-size: 6rem;
  line-height: 30rem;
  opacity: 0.18;
}
.flashing-main > .p7 > p:last-child {
  font-size: 2.67rem;
  line-height: 3rem;
  position: absolute;
  top: 50%;
  margin-top: -1.5rem;
  height: 3rem;
  width: 100%;
  opacity: 1;
}
.flashing-main > .p8 {
  display: none;
  width: 82%;
  padding-left: 18%;
  padding-top: 10.09rem;
}
.flashing-main > .p8 > p {
  font-size: 1.6rem;
  height: 2.24rem;
  line-height: 2.24rem;
  top: 13.09rem;
}
.flashing-main > .p8 > p:nth-child(2) {
  font-size: 3.2rem;
  height: 4.48rem;
  line-height: 4.48rem;
  color: #f00;
}
.flashing-main > .p9 {
  display: none;
  text-align: center;
}
.flashing-main > .p9 > p:first-child {
  width: 100%;
  height: 30rem;
  font-size: 10.67rem;
  line-height: 30rem;
}
.flashing-main > .p9 > p:last-child {
  font-size: 2.07rem;
  line-height: 3rem;
  position: absolute;
  top: 48%;
  margin-top: -1.5rem;
  height: 3rem;
  width: 100%;
  opacity: 1;
}
.download {
  width: 100%;
  height: 100%;
}
.download .logo {
  color: #572224;
  margin-top: 1rem;
}
.download-main {
  background: #ffe100;
  width: 100%;
  height: 100%;
  background-image: url(../img/download-bg.png);
  background-position: center;
  background-size: 100% 100%;
  position: relative;
}
.download-main .title {
  width: 72%;
  margin: 0 auto;
  padding-top: 1.69rem;
}
.download-main .center {
  width: 63.5%;
  margin: 1.05rem auto 0;
}
.download-main .download-btn {
  width: 100%;
}
.download-main .download-btn .download-img {
  width: 48.27%;
  margin: 0.85rem auto 0;
}
.download-main .font40 {
  text-align: center;
  font-size: 1rem;
  height: 1rem;
  line-height: 1rem;
  font-family: '黑体';
  color: #572224;
  margin-top: 1.799%;
}
.download-main .font {
  text-align: center;
  font-size: 0.64rem;
  height: 1rem;
  line-height: 1rem;
  font-family: '黑体';
  color: #572224;
  margin-top: 1.799%;
}
.download-main .explain {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
}
.download-main .explain > div:first-child {
  width: 4.27rem;
  margin-top: 5.16rem;
  margin-left: 64%;
}
.download-main .explain > div:nth-child(2) {
  font-family: '手札体-简';
  font-size: 0.85rem;
  margin-left: 18.93%;
  color: #fff;
  margin-top: 2rem;
}
.download-main .explain > div:nth-child(2) img {
  width: 0.85rem;
  vertical-align: middle;
}
.download-main .explain > div:nth-child(2) p {
  line-height: 1rem;
}
.download-main .explain > div:nth-child(3) {
  width: 33.06%;
  margin: 4.426rem auto 0;
}
